﻿<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>iNEWU 爱牛油 - 在线观看免费正版高清亚洲电视剧、电影、综艺、动漫 - 独家韩剧、陆剧、泰剧 </title>
        <link href="favicon.ico" rel="shortcut icon">
	    <script src="js/common/axios.min.js"></script>
        <script src="js/common/vue.js"></script>
        <script src="js/common/template.js"></script>
        <script src="js/common/vue-resource.js"></script>
        <script src="js/common/httpVueLoader.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/mine.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <style type="text/css">
            [v-cloak]{
              display: none;
            }
        </style>
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main @add-notice="addNotice"></v-main>
            <v-footer></v-footer>
            <v-notice ref="noticeRef"></v-notice>
            <v-side ref="sideRef"></v-side>
            <v-confirm ref="confirmRef"></v-confirm>
        </div>
        <template id="vMain">
            <main v-cloak class="flex">
                <div class="lft">
                    <div class="info flex flex-align-items">
                        <p class="avt mid r50">
                            <img :src="userInfo.avatar" class="fc" v-if="userInfo.avatar">
                            <img :src="userInfo.sex == 0?'img/common/girl.jpg':'img/common/boy.jpg'" class="fc" v-else>
                        </p>
                        <p class="name l1">{{userInfo.name}}</p>
                    </div>
                    <p class="join-vip cursor">加入会员</p>
                    <div class="menu">
                        <a href="javascript:;" class="hbc notransition flex flex-align-items" 
                        v-for="item in menu"
                        :class="{active:curr.val == item.val}" 
                        @click="menuClick(item)">
                            <div class="icon">
                                <img :src="item.img1">
                                <img :src="item.img2">
                            </div>
                            <p class="t">{{item.name}}</p>
                        </a>
                    </div>
                </div>
                <div class="rht" :class="curr.val">
                    <p class="ttl">{{curr.name}}</p>
                    <div class="palace">
                        <template v-if="curr.val == 'set'">
                            <div class="blk info">
                                <p class="subTtl">个人资料</p>
                                <div class="flex flex-align-items">
                                    <p class="avt mid r50">
                                        <img :src="userInfo.avatar" class="fc" v-if="userInfo.avatar">
                                        <img :src="userInfo.sex == 0?'img/common/girl.jpg':'img/common/boy.jpg'" class="fc" v-else>
                                    </p>
                                    <div class="txt flex flex-col">
                                        <div class="name flex flex-align-items">
                                            <p>{{userInfo.name}}</p>
                                        </div>
                                        <div class="dtls flex flex-align-items">
                                            <p><span>性别:</span>男</p>
                                            <p><span>生日:</span>1997-05-29</p>
                                            <p><span>UID:</span>24241241</p>
                                        </div>
                                        <p class="btn vc">编辑</p>
                                    </div>
                                </div>
                            </div>
                            <div class="blk vip">
                                <p class="subTtl">会员</p>
                                <div class="flex box flex-align-items">
                                    <div class="txt">
                                        <p>成为VIP</p>
                                        <p>加入会员，跳广告畅享全站海量高清大片！</p>
                                    </div>
                                    <p class="cursor join fillBf">加入会员></p>
                                    <div class="v fill">
                                        <img src="img/mine/vip.png" class="fill">
                                    </div>
                                </div>
                            </div>
                            <div class="blk account">
                                <p class="subTtl">账号与安全</p>
                                <div class="box">
                                    <div class="item flex">
                                        <p class="lbl">电子邮件</p>9129102@13.com
                                        <p class="btn vc">激活</p>
                                    </div>
                                    <div class="item flex">
                                        <p class="lbl">手机号</p>未设置
                                        <p class="btn vc">设置</p>
                                    </div>
                                    <div class="item flex">
                                        <p class="lbl">密码</p>未设置
                                        <p class="btn vc">设置</p>
                                    </div>
                                    <!-- <div class="item flex">
                                        <p class="lbl">自动续费管理</p>您未开通自动续费
                                        <p class="btn vc">修改</p>
                                    </div> -->
                                    <div class="item flex">
                                        <p class="lbl">删除账号</p>删除当前账号
                                        <p class="btn vc">删除</p>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="btn-box flex">
                                <template v-if="listEditting">
                                    <p class="cancel fillBf" @click="hdlDel">取消</p>
                                    <p class="base-btn" :class="{disabled:!delAry.length}" @click="del">删除</p>
                                </template>
                                <p class="base-btn" @click="hdlDel" v-else>编辑</p>
                            </div>
                            <div class="list-box" :class="{listEditting:listEditting}">
                                <div class="filter-box flex flex-align-items" v-if="curr.val == 'history'">
                                    <div class="turn cursor" :class="{active:filterShort}" @click="hdlFilter">
                                        <p class="circle vc mid r50"></p>
                                    </div>过滤短视频
                                    <div class="chsAll flex flex-align-items vc cursor" v-if="listEditting"
                                    :class="{active:isChsAll}"
                                    @click="chsAll">
                                        <p class="circle mid r50">
                                            <img src="img/common/gou1.png" class="hvc">
                                        </p>全选
                                    </div>
                                </div>
                                <template v-else>
                                    <div class="chsAll flex flex-align-items cursor" v-if="listEditting"
                                    :class="{active:isChsAll}"
                                    @click="chsAll">
                                        <p class="circle mid r50">
                                            <img src="img/common/gou1.png" class="hvc">
                                        </p>全选
                                    </div>
                                </template>
                                <div class="list flex flex-wrap">
                                    <template v-for="(item,i) in list">
                                        <div class="item cursor" @click="tap(i)" :class="{active:item.chsed}" v-if="curr.val == 'collect' || (!item.isShort || (!filterShort && item.isShort))">
                                            <div class="cover mid">
                                                <img :src="item.cover" class="fc">
                                                <p class="play-btn mid" :class="{hvc:curr.val == 'collect'}">
                                                    <img src="img/common/triangle.png" class="hvc">
                                                </p>
                                                <div class="shadow fill" v-if="listEditting">
                                                     <p class="circle mid r50">
                                                        <img src="img/common/gou1.png" class="hvc">
                                                    </p>
                                                </div>
                                                <template v-if="curr.val == 'history'">
                                                    <div class="to">
                                                        <p class="l1">观看至第{{item.to}}集</p>
                                                    </div>
                                                    <div class="progress">
                                                        <p class="per" :style="{width:'20%'}"></p>
                                                    </div>
                                                </template>
                                            </div>
                                            <div class="txt">
                                                <p class="name l2">{{item.name}}</p>
                                                <p class="no" v-if="item.seriesNumber && curr.val == 'collect'">{{item.seriesAll?(item.seriesNumber + '集全'):('更新至' + item.seriesNumber + '集')}}</p>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </main>
        </template>
        
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script>
            Vue.use(httpVueLoader);
            var contn = new Vue({
                el:'#contn',
                data:{
                   
                },
                methods:{
                    addNotice(obj){
                        
                    },
                    showWindow(obj){
                        return this.$refs.confirmRef.hdlShow(obj);
                    }
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    'v-header': 'url:./js/common/v-header.vue',
                    'v-footer': 'url:./js/common/v-footer.vue',
                    'v-notice': 'url:./js/common/v-notice.vue',
                    'v-side': 'url:./js/common/v-side.vue',
                    'v-confirm': 'url:./js/common/v-confirm.vue',
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                userInfo:{
                                    sex:1,
                                    name:'zansl'
                                },
                                curr:{},
                                menu:[
                                    {name:'个人设定',val:'set',img1:'img/common/mine.png',img2:'img/common/mine1.png'},
                                    {name:'观看历史',val:'history',img1:'img/common/history.png',img2:'img/common/history1.png'},
                                    {name:'我的收藏',val:'collect',img1:'img/common/collect4-0.png',img2:'img/common/collect4-1.png'},
                                    {name:'登出',val:'logout',img1:'img/common/logout2.png',img2:'img/common/logout1.png'},
                                ],
                                list:[
                                    {name:'与晋长安',id:'1',to:1,cover:'img/index/1.jpg',seriesNumber:10,seriesAll:false},
                                    {name:'与晋长安',id:'2',to:1,cover:'img/index/2.jpg',seriesNumber:24,seriesAll:true},
                                    {name:'与晋长安',id:'3',to:1,cover:'img/index/3.jpg',seriesNumber:42,seriesAll:true},
                                    {name:'与晋长安',id:'4',to:1,cover:'img/index/4.jpg',seriesNumber:5,seriesAll:false},
                                    {name:'与晋长安',id:'5',to:1,cover:'img/index/5.jpg',seriesNumber:36,seriesAll:true},
                                    {name:'与晋长安',id:'6',to:1,cover:'img/index/5.jpg',},
                                    {name:'霸总爱上我',id:'7',to:1,cover:'img/index/7.jpg',isShort:true},
                                    {name:'与晋长安',id:'8',to:1,cover:'img/index/5.jpg',},
                                ],
                                filterShort:true,
                                listEditting:false,
                                isChsAll:false,
                                delAry:[],
                            }
                        },
                        watch: {
                            
                        },
                        methods:{
                            menuClick(item){
                                if(item.val == 'logout'){

                                }else{
                                    location.href = `mine.html?name=${item.val}`;
                                }
                            },
                            hdlFilter(){
                                if(!this.listEditting){
                                    this.filterShort = !this.filterShort;                                    
                                }
                            },
                            writingWeb(){
                                var This = this;
                            },
                            toDtl(row){
                                window.open("info.html", "_blank");
                            },
                            hdlDel(){
                                this.listEditting = !this.listEditting;
                                if(!this.listEditting){
                                    this.chsAll(false);
                                }
                            },
                            tap(ind){
                                if(this.listEditting){
                                    let ary = newObj(this.list);
                                    ary[ind].chsed = !ary[ind].chsed;
                                    this.list = ary;
                                    this.updtChs();
                                }else{
                                    window.open(this.curr.val == 'collect'?"info.html":"play.html", "_blank");
                                }                                
                            },
                            updtChs(){
                                this.delAry = getSpecifyKeysVal(getMatchedItm(this.list,true,'chsed'),'id');
                                this.isChsAll = (this.delAry.length == this.list.length && this.list.length)?true:false;
                                
                            },
                            chsAll(val){
                                let ary = newObj(this.list);
                                let This = this;
                                ary.forEach(item=>{
                                    item.chsed = typeof(val) == 'boolean'?val:!This.isChsAll;
                                })
                                this.list = ary;
                                this.updtChs();
                            },
                            async del(){
                                if(this.delAry.length){
                                   const isConfirmed = await this.$parent.showWindow({
                                        title:'确定删除?',
                                        text:'点击“删除”钮会将已选取的视频清掉',
                                        cancelText:'取消',
                                        confirmText:'删除',
                                    });
                                    console.log(isConfirmed);
                                    if (isConfirmed) {
                                        // 用户确认删除
                                        console.log('用户确认删除');
                                        this.list = this.list.filter(item => !this.delAry.includes(item.id));
                                        this.updtChs();
                                    } else {
                                        // 用户取消删除
                                        this.hdlDel();
                                        console.log('用户取消删除');
                                    }
                                    
                                    
                                }
                            },
                        },
                        beforeDestroy() {
                        },
                        mounted:function(){
                            var This = this;
                            this.writingWeb();
                            this.curr = getSpecifyItem(this.menu,GetQueryString('name') || 'set','val');
                        }
                    },
                },
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>